<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search-container">
      <input
        v-model="searchText"
        class="search-input"
        placeholder="请输入搜索关键词"
        @input="onSearch"
      />
      <button class="clear-button" @click="onCancel">清空</button>
    </view>

    <!-- 已选标签 -->
    <view>
      <text class="section-title">已选标签</text>
      <view v-if="activeIds.length === 0" class="empty-message">暂无已选标签</view>
      <view class="tag-container">
        <up-tag
          v-for="tag in activeIds"
          :key="tag"
          type="primary"
          size="mini"
          :closable="true"
          @close="doClose(tag)"
          style="margin: 4px;"
        >
          {{ tag }}
        </up-tag>
      </view>
    </view>

    <!-- 标签分类 -->
    <view>
      <text class="section-title">选择标签</text>
      <view
        v-for="(category, index) in tagList"
        :key="index"
        class="category-container"
      >
        <!-- 分组标题 -->
        <view class="category-header" @click="toggleCategory(index)">
          <text>{{ category.text }}</text>
          <view class="category-icon">
            <text>{{ expandedCategories[index] ? "▲" : "▼" }}</text>
          </view>
        </view>

        <!-- 分组内容 -->
        <view
          v-if="expandedCategories[index]"
          class="tag-container scrollable-container"
        >
          <!-- 标签 -->
          <up-tag
            v-for="(tag, tagIndex) in category.children"
            :key="`${categoryIndex}-${tagIndex}`"
            type="default"
            size="mini"
            :plain="!activeIds.includes(tag.id)"
            :style="{
              backgroundColor: activeIds.includes(tag.id) ? '#007aff' : '#f5f5f5',
              color: activeIds.includes(tag.id) ? '#fff' : '#333',
            }"
            @click="toggleTag(tag.id)"
            style="margin: 4px;"
          >
              <text
                v-for="(part, index) in highlightKeyword(tag.text)"
                :key="index"
                :style="{ color: part.isHighlight ? '#ff5722' : '#333', fontWeight: part.isHighlight ? 'bold' : 'normal' }"
              >
                {{ part.text }}
              </text>
          </up-tag>

          <!-- 未匹配标签提示 -->
          <view v-if="category.children.length === 0" class="empty-category">
            暂无匹配标签
          </view>
        </view>
      </view>
    </view>

    <!-- 搜索按钮 -->
    <up-button type="primary" text="搜索" class="search-button" @click="doSearchResult"></up-button>
  </view>
</template>

<script setup>
import { ref } from "vue";

// 原始标签列表
const originTagList = [
  {
    text: "性别",
    children: [
      { text: "男", id: "男" },
      { text: "女", id: "女" },
    ],
  },
  {
    text: "学院",
    children: [
      { text: "智能科技学院", id: "智能科技学院" },
      { text: "汽车工程学院", id: "汽车工程学院" },
      { text: "商学院", id: "商学院" },
      { text: "人文学院", id: "人文学院" },
      { text: "盛宝金融科技学院", id: "盛宝金融科技学院" },
      { text: "艺术设计学院", id: "艺术设计学院" },
      { text: "体育与健康学院", id: "体育与健康学院" },
      { text: "吉利科技航空航天学院", id: "吉利科技航空航天学院" },
      { text: "博雅学院", id: "博雅学院" },
      { text: "创新创业学院", id: "创新创业学院" },
      { text: "外国语言与文化学院", id: "外国语言与文化学院" },
      { text: "马克思主义学院", id: "马克思主义学院" },
    ],
  },
  {
    text: "专业",
    children: [
      { text: "计算机科学与技术", id: "计算机科学与技术" },
      { text: "网络工程", id: "网络工程" },
      { text: "数据科学与大数据", id: "数据科学与大数据" },
      { text: "虚拟现实技术", id: "虚拟现实技术" },
      { text: "车辆工程", id: "车辆工程" },
      { text: "汽车服务工程", id: "汽车服务工程" },
      { text: "机器设计制造及其自动化", id: "机器设计制造及其自动化" },
      { text: "新能源汽车工程", id: "新能源汽车工程" },
      { text: "机器人工程", id: "机器人工程" },
      { text: "智能车辆工程", id: "智能车辆工程" },
      { text: "知识产权", id: "知识产权" },
      { text: "艺术设计学", id: "艺术设计学" },
      { text: "数字媒体艺术", id: "数字媒体艺术" },
      { text: "产品设计", id: "产品设计" },
      { text: "环境艺术设计", id: "环境艺术设计" },
      { text: "财务管理", id: "财务管理" },
      { text: "人力资源管理", id: "人力资源管理" },
      { text: "市场营销", id: "市场营销" },
      { text: "审计学", id: "审计学" },
      { text: "管理科学与工程", id: "管理科学与工程" },
      { text: "大数据管理与应用", id: "大数据管理与应用" },
      { text: "物流管理", id: "物流管理" },
      { text: "电子商务", id: "电子商务" },
      { text: "国际经济与贸易", id: "国际经济与贸易" },
      { text: "经济与金融", id: "经济与金融" },
      { text: "金融科技", id: "金融科技" },
      { text: "飞行器控制与信息工程", id: "飞行器控制与信息工程" },
      { text: "飞行器制造工程", id: "飞行器制造工程" },
      { text: "运动康复", id: "运动康复" },
      { text: "体育经济与管理", id: "体育经济与管理" },
      { text: "学前教育", id: "学前教育" },
      { text: "小学教育", id: "小学教育" },
      { text: "表演", id: "表演" },
      { text: "广播电视编导", id: "广播电视编导" },
      { text: "网络与新媒体", id: "网络与新媒体" },
      { text: "动画", id: "动画" },
      { text: "英语", id: "英语" },
    ],
  },
  {
    text: "体育爱好",
    children: [
      { text: "篮球", id: "篮球" },
      { text: "足球", id: "足球" },
      { text: "乒乓球", id: "乒乓球" },
      { text: "羽毛球", id: "羽毛球" },
      { text: "橄榄球", id: "橄榄球" },
      { text: "台球", id: "台球" },
      { text: "跑步", id: "跑步" },
      { text: "滑板", id: "滑板" },
    ],
  },
];

// 搜索文本、筛选结果等响应式变量
const searchText = ref("");
const tagList = ref(originTagList);
const activeIds = ref([]);
const expandedCategories = ref(originTagList.map(() => true));

// 搜索功能
const onSearch = () => {
  if (!searchText.value.trim()) {
    tagList.value = originTagList;
    expandedCategories.value = originTagList.map(() => true);
    return;
  }
  tagList.value = originTagList.map((category) => {
    const filteredChildren = category.children.filter((item) =>
      item.text.includes(searchText.value)
    );
    return { ...category, children: filteredChildren };
  });
  expandedCategories.value = tagList.value.map(() => true);
};

// 取消搜索
const onCancel = () => {
  searchText.value = "";
  tagList.value = originTagList;
  expandedCategories.value = originTagList.map(() => true);
};

// 切换标签选中状态
const toggleTag = (id) => {
  if (activeIds.value.includes(id)) {
    activeIds.value = activeIds.value.filter((item) => item !== id);
  } else {
    activeIds.value.push(id);
  }
};

// 切换类别展开状态
const toggleCategory = (index) => {
  expandedCategories.value[index] = !expandedCategories.value[index];
};

// 关闭选中标签
const doClose = (tag) => {
  activeIds.value = activeIds.value.filter((item) => item !== tag);
};

// 高亮关键字
const highlightKeyword = (text) => {
  if (!searchText.value || !text) return [{ text, isHighlight: false }];
  const keyword = searchText.value;
  const parts = text.split(new RegExp(`(${keyword})`, "gi"));
  return parts.map((part) => ({
    text: part,
    isHighlight: part.toLowerCase() === keyword.toLowerCase(),
  }));
};

// 执行搜索结果操作
const doSearchResult = () => {
  uni.navigateTo({
    url: `/pages/user/list?tags=${JSON.stringify(activeIds.value)}`,
  });
};
</script>


<style scoped>
.container {
  padding: 16px;
  background-color: #f9f9f9;
}

.search-container {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.search-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 14px;
  background-color: #fff;
}

.clear-button {
  margin-left: 8px;
  background: transparent;
  border: none;
  color: #007aff;
  font-size: 14px;
  cursor: pointer;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin: 16px 0 8px;
}

.category-container {
  margin-bottom: 12px;
  background-color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  color: #333;
}

.category-icon {
  font-size: 12px;
  color: #888;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
}

.scrollable-container {
  max-height: 150px;
  overflow-y: auto;
}

.empty-category {
  padding: 12px;
  background-color: #f5f5f5;
  border-radius: 8px;
  text-align: center;
  color: #aaa;
  font-size: 14px;
  margin-top: 8px;
}

.search-button {
  margin-top: 16px;
  width: 100%;
  border-radius: 24px;
}

.highlight {
  color: #ff5722;
  font-weight: bold;
}
</style>
